<template>
    <el-dialog :visible.sync="dialogVisible" title="选择商品" top="1vh" :before-close="close" width="1000px">
        <div class="mb-15">
            <div v-if="multiple">已选择{{ goodsChecked.length }}项商品</div>
            <el-table ref="multipleTable" v-loading="loading" row-key="id" :data="listData" tooltip-effect="dark" style="width: 100%;" @select-all="selectAll" @select="selectChange">
                <el-table-column v-if="multiple" type="selection" width="55" />
                <el-table-column prop="id" label="ID" width="60" />
                <el-table-column prop="number" label="编码" width="130" />
                <el-table-column prop="title" label="商品" show-overflow-tooltip />
                <el-table-column prop="business_classify" label="分类" />
                <el-table-column prop="sale_price" label="销售价" />
                <el-table-column prop="shop.name" label="店铺" />
                <el-table-column v-if="!multiple" label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleChoice(scope.row)">选择</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="flex space-between">
            <el-pagination :page-size.sync="tablePage.size" :current-page.sync="tablePage.page" background layout="prev, pager, next" :total="tablePage.total" @current-change="getData" />
            <div>
                <el-button @click="close">取消</el-button>
                <el-button v-if="multiple" type="primary" @click="handleSelect">确认</el-button>
            </div>
        </div>
    </el-dialog>
</template>
<script>
export default {
    name: 'GoodsSelect',
    props: {
        value: {
            type: Boolean,
            default: false
        },
        checked: {
            type: Array,
            default: () => []
        },
        multiple: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            loading: false,
            dialogVisible: false,
            tablePage: {
                size: 10,
                page: 1,
                total: 0
            },
            listData: [],
            goodsChecked: []
        }
    },
    watch: {
        value(value) {
            this.dialogVisible = value
            if (value) {
                this.goodsChecked = JSON.parse(JSON.stringify(this.checked))
                this.tablePage.page = 1
                this.getData()
            }
        }
    },
    created() {
        this.dialogVisible = this.value
    },
    methods: {
        getData() {
            this.loading = true
            this.$api.post('product/product/tabulation', {
                ...this.form,
                ...this.tablePage
            }).then(res => {
                const data = res.data
                this.listData = data.data
                if (data.meta && data.meta.pagination) {
                    this.tablePage = Object.assign(this.tablePage, data.meta.pagination)
                }
                this.$nextTick(() => {
                    this.getDataCallback()
                })
            }).finally(() => {
                this.loading = false
            })
        },
        getDataCallback() {
            if (this.goodsChecked.length) {
                const ids = this.goodsChecked.map(item => item.id)
                this.listData.forEach(row => {
                    console.log(row, ids.includes(row.id))
                    this.$refs.multipleTable.toggleRowSelection(row, ids.includes(row.id))
                })
            }
        },
        handleSelect() {
            if (!this.goodsChecked.length) {
                this.$message.warning('请选择商品')
                return
            }
            console.log(this.goodsChecked)
            this.$emit('select', this.goodsChecked)
            this.close()
        },
        handleChoice(row) {
            this.$emit('select', row)
            this.close()
        },
        selectChange(selection, row) {
            let isSelecte = selection.includes(row)
            // 选中
            if (isSelecte) {
                // 如果选中数据中没有当前行，增加
                if (!this.goodsChecked.map(item => item.id).includes(row.id)) {
                    this.goodsChecked.push(row)
                }
            } else { // 取消选中
                // 如果选中数据中有当前行，那么剔除掉
                if (this.goodsChecked.map(item => item.id).includes(row.id)) {
                    let rowIndex = 0
                    this.goodsChecked.forEach((element, index) => {
                        if (element.id === row.id) {
                            rowIndex = index
                        }
                    })
                    this.goodsChecked.splice(rowIndex, 1)
                }
            }
        },
        // 全选
        selectAll(selection) {
            // 全选
            const ids = this.goodsChecked.map(item => item.id)
            if (selection.length) {
                selection.forEach(element => {
                    if (!ids.includes(element.id)) {
                        this.goodsChecked.push(element)
                    }
                })
            } else { // 取消全选，将当前页所有数据从goodsCheck中剔除
                this.listData.forEach(goods => {
                    this.goodsChecked.forEach((item, index) => {
                        if (item.id === goods.id) {
                            this.goodsChecked.splice(index, 1)
                        }
                    })
                })
            }
            console.log(selection.map(item => item.id), this.goodsChecked.map(item => item.id))
        },
        close() {
            this.goodsChecked = []
            this.$refs.multipleTable.clearSelection()
            this.$emit('input', false)
        }
    }
}
</script>
